<!DOCTYPE html>
<html>
<head>
  <!-- Standard Meta -->
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

<link rel="image_src" type="image/jpeg" href="/images/logo.png" />

<!-- Site Properities -->
<meta name="generator" content="DocPad v6.79.4" />
<title>Menu | Semantic UI</title>

<meta name="description" content="A menu displays grouped navigation actions" />
<meta name="keywords" content="html5, ui, library, framework, javascript" />
  
  <script src="/javascript/library/detect.min.js"></script>
  <script src="/javascript/library/jquery.min.js"></script>
  <script src="/javascript/library/clipboard.min.js"></script>
  <script src="/javascript/library/cookie.min.js"></script>
  <script src="/javascript/library/easing.min.js"></script>
  <script src="/javascript/library/highlight.min.js"></script>
  <script src="/javascript/library/history.min.js"></script>
  <script src="/javascript/library/state.js"></script>
  <script src="/javascript/library/tablesort.min.js"></script>
  <script src="/javascript/library/underscore.min.js"></script>





<script src="/dist/semantic.min.js"></script>



<script src="/javascript/docs.js"></script>

  
<link rel="stylesheet" type="text/css" class="ui" href="/dist/semantic.min.css">




<link rel="stylesheet" type="text/css" href="/stylesheets/docs.css">
<link rel="stylesheet" type="text/css" href="/stylesheets/rtl.css">





  
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-44039803-2', 'auto');
  ga('send', 'pageview');
</script>

  
<script type="text/javascript">
  window.liveSettings = {
    api_key    : '9ede3015b9f84c1aabc81ab839c55d74',
    parse_attr : [
      'data-title',
      'data-content'
    ],
    detectlang   : false,
    autocollect  : true,
    ignore_tags  : ['i', 'code', 'pre'],
    parse_attr   : ['data-title', 'data-content', 'data-text'],
    ignore_class : ['code', 'anchor']
  };
</script>
<script type="text/javascript" src="//cdn.transifex.com/live.js"></script>


</head>
<body id="example" class="menu" ontouchstart="">
  
  <div class="ui vertical inverted sidebar menu" id="toc">
  








<div class="item">
  <a class="ui logo icon image" href="/">
    <img src="/images/logo.png">
  </a>
  <a href="/"><b>UI Docs</b></a>
</div>
<a class="item" href="/introduction/getting-started.html">
  <b>Getting Started</b>
</a>
<a class="item" href="/introduction/new.html">
  <b>New in 2.4</b>
</a>
<div class="item">
  <div class="header">Introduction</div>
  <div class="menu">
    
      <a class="item" href="/introduction/integrations.html">
        Integrations
      </a>
    
      <a class="item" href="/introduction/build-tools.html">
        Build Tools
      </a>
    
      <a class="item" href="/introduction/advanced-usage.html">
        Recipes
      </a>
    
      <a class="item" href="/introduction/glossary.html">
        Glossary
      </a>
    
  </div>
</div>
<div class="item">
  <div class="header">Usage</div>
  <div class="menu">
    
      <a class="item" href="/usage/theming.html">
        Theming
      </a>
    
      <a class="item" href="/usage/layout.html">
        Layouts
      </a>
    
  </div>
</div>
<div class="item">
  <div class=" header">Globals</div>
  <div class="menu">
    
      <a class="item" href="/globals/reset.html">
        Reset
        
      </a>
    
      <a class="item" href="/globals/site.html">
        Site
        
      </a>
    
  </div>
</div>
<div class="item">
  <div class=" header">Elements</div>
  <div class="menu">
    
      <a class="item" href="/elements/button.html">
        Button
        
      </a>
    
      <a class="item" href="/elements/container.html">
        Container
        
      </a>
    
      <a class="item" href="/elements/divider.html">
        Divider
        
      </a>
    
      <a class="item" href="/elements/flag.html">
        Flag
        
      </a>
    
      <a class="item" href="/elements/header.html">
        Header
        
      </a>
    
      <a class="item" href="/elements/icon.html">
        Icon
        
      </a>
    
      <a class="item" href="/elements/image.html">
        Image
        
      </a>
    
      <a class="item" href="/elements/input.html">
        Input
        
      </a>
    
      <a class="item" href="/elements/label.html">
        Label
        
      </a>
    
      <a class="item" href="/elements/list.html">
        List
        
      </a>
    
      <a class="item" href="/elements/loader.html">
        Loader
        
      </a>
    
      <a class="item" href="/elements/placeholder.html">
        Placeholder
        
      </a>
    
      <a class="item" href="/elements/rail.html">
        Rail
        
      </a>
    
      <a class="item" href="/elements/reveal.html">
        Reveal
        
      </a>
    
      <a class="item" href="/elements/segment.html">
        Segment
        
      </a>
    
      <a class="item" href="/elements/step.html">
        Step
        
      </a>
    
  </div>
</div>
<div class="item">
  <div class="active  header">Collections</div>
  <div class="menu">
    
      <a class="item" href="/collections/breadcrumb.html">
        Breadcrumb
        
      </a>
    
      <a class="item" href="/collections/form.html">
        Form
        
      </a>
    
      <a class="item" href="/collections/grid.html">
        Grid
        
      </a>
    
      <a class="active item" href="/collections/menu.html">
        Menu
        
      </a>
    
      <a class="item" href="/collections/message.html">
        Message
        
      </a>
    
      <a class="item" href="/collections/table.html">
        Table
        
      </a>
    
  </div>
</div>
<div class="item">
  <div class=" header">Views</div>
  <div class="menu">
    
      <a class="item" href="/views/advertisement.html">
        Advertisement
        
      </a>
    
      <a class="item" href="/views/card.html">
        Card
        
      </a>
    
      <a class="item" href="/views/comment.html">
        Comment
        
      </a>
    
      <a class="item" href="/views/feed.html">
        Feed
        
      </a>
    
      <a class="item" href="/views/item.html">
        Item
        
      </a>
    
      <a class="item" href="/views/statistic.html">
        Statistic
        
      </a>
    
  </div>
</div>
<div class="item">
  <div class=" header">Modules</div>
  <div class="menu">
    
      <a class="item" href="/modules/accordion.html">
        Accordion
        
      </a>
  
      <a class="item" href="/modules/checkbox.html">
        Checkbox
        
      </a>
  
      <a class="item" href="/modules/dimmer.html">
        Dimmer
        
      </a>
  
      <a class="item" href="/modules/dropdown.html">
        Dropdown
        
      </a>
  
      <a class="item" href="/modules/embed.html">
        Embed
        
      </a>
  
      <a class="item" href="/modules/modal.html">
        Modal
        
      </a>
  
      <a class="item" href="/modules/popup.html">
        Popup
        
      </a>
  
      <a class="item" href="/modules/progress.html">
        Progress
        
      </a>
  
      <a class="item" href="/modules/rating.html">
        Rating
        
      </a>
  
      <a class="item" href="/modules/search.html">
        Search
        
      </a>
  
      <a class="item" href="/modules/shape.html">
        Shape
        
      </a>
  
      <a class="item" href="/modules/sidebar.html">
        Sidebar
        
      </a>
  
      <a class="item" href="/modules/sticky.html">
        Sticky
        
      </a>
  
      <a class="item" href="/modules/tab.html">
        Tab
        
      </a>
  
      <a class="item" href="/modules/transition.html">
        Transition
        
      </a>
  
  </div>
</div>
<div class="item">
  <div class=" header">Behaviors</div>
  <div class="menu">
    
      <a class="item" href="/behaviors/api.html">
        API
        
      </a>
    
      <a class="item" href="/behaviors/form.html">
        Form Validation
        
      </a>
    
      <a class="item" href="/behaviors/visibility.html">
        Visibility
        
      </a>
    
  </div>
</div>

</div>

<div class="ui black big launch right attached fixed button">
  <i class="content icon"></i>
  <span class="text">Menu</span>
</div>
  




<div class="ui fixed inverted main menu">
  <div class="ui container">
    <a class="launch icon item">
      <i class="content icon"></i>
    </a>
    
      <div class="item">
        Menu
      </div>
    
    <div class="right menu">
      
      <div class="vertically fitted borderless item">
        <iframe class="github" src="//ghbtns.com/github-btn.html?user=semantic-org&amp;repo=semantic-ui&amp;type=watch&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100" height="20"></iframe>
      </div>
      
      <!--
      <div class="item">
        <div class="ui hidden right aligned search input" id="search">
          <div class="ui transparent icon input">
            <input class="prompt" type="text" placeholder="Search...">
            <i class="inverted search link icon" data-content="Search UI"></i>
          </div>
          <div class="results"></div>
        </div>
      </div>
      -->
    </div>
  </div>
</div>

  <div class="pusher">
    <div class="full height">
      <div class="toc">
        <div class="ui vertical inverted menu">
          








<div class="item">
  <a class="ui logo icon image" href="/">
    <img src="/images/logo.png">
  </a>
  <a href="/"><b>UI Docs</b></a>
</div>
<a class="item" href="/introduction/getting-started.html">
  <b>Getting Started</b>
</a>
<a class="item" href="/introduction/new.html">
  <b>New in 2.4</b>
</a>
<div class="item">
  <div class="header">Introduction</div>
  <div class="menu">
    
      <a class="item" href="/introduction/integrations.html">
        Integrations
      </a>
    
      <a class="item" href="/introduction/build-tools.html">
        Build Tools
      </a>
    
      <a class="item" href="/introduction/advanced-usage.html">
        Recipes
      </a>
    
      <a class="item" href="/introduction/glossary.html">
        Glossary
      </a>
    
  </div>
</div>
<div class="item">
  <div class="header">Usage</div>
  <div class="menu">
    
      <a class="item" href="/usage/theming.html">
        Theming
      </a>
    
      <a class="item" href="/usage/layout.html">
        Layouts
      </a>
    
  </div>
</div>
<div class="item">
  <div class=" header">Globals</div>
  <div class="menu">
    
      <a class="item" href="/globals/reset.html">
        Reset
        
      </a>
    
      <a class="item" href="/globals/site.html">
        Site
        
      </a>
    
  </div>
</div>
<div class="item">
  <div class=" header">Elements</div>
  <div class="menu">
    
      <a class="item" href="/elements/button.html">
        Button
        
      </a>
    
      <a class="item" href="/elements/container.html">
        Container
        
      </a>
    
      <a class="item" href="/elements/divider.html">
        Divider
        
      </a>
    
      <a class="item" href="/elements/flag.html">
        Flag
        
      </a>
    
      <a class="item" href="/elements/header.html">
        Header
        
      </a>
    
      <a class="item" href="/elements/icon.html">
        Icon
        
      </a>
    
      <a class="item" href="/elements/image.html">
        Image
        
      </a>
    
      <a class="item" href="/elements/input.html">
        Input
        
      </a>
    
      <a class="item" href="/elements/label.html">
        Label
        
      </a>
    
      <a class="item" href="/elements/list.html">
        List
        
      </a>
    
      <a class="item" href="/elements/loader.html">
        Loader
        
      </a>
    
      <a class="item" href="/elements/placeholder.html">
        Placeholder
        
      </a>
    
      <a class="item" href="/elements/rail.html">
        Rail
        
      </a>
    
      <a class="item" href="/elements/reveal.html">
        Reveal
        
      </a>
    
      <a class="item" href="/elements/segment.html">
        Segment
        
      </a>
    
      <a class="item" href="/elements/step.html">
        Step
        
      </a>
    
  </div>
</div>
<div class="item">
  <div class="active  header">Collections</div>
  <div class="menu">
    
      <a class="item" href="/collections/breadcrumb.html">
        Breadcrumb
        
      </a>
    
      <a class="item" href="/collections/form.html">
        Form
        
      </a>
    
      <a class="item" href="/collections/grid.html">
        Grid
        
      </a>
    
      <a class="active item" href="/collections/menu.html">
        Menu
        
      </a>
    
      <a class="item" href="/collections/message.html">
        Message
        
      </a>
    
      <a class="item" href="/collections/table.html">
        Table
        
      </a>
    
  </div>
</div>
<div class="item">
  <div class=" header">Views</div>
  <div class="menu">
    
      <a class="item" href="/views/advertisement.html">
        Advertisement
        
      </a>
    
      <a class="item" href="/views/card.html">
        Card
        
      </a>
    
      <a class="item" href="/views/comment.html">
        Comment
        
      </a>
    
      <a class="item" href="/views/feed.html">
        Feed
        
      </a>
    
      <a class="item" href="/views/item.html">
        Item
        
      </a>
    
      <a class="item" href="/views/statistic.html">
        Statistic
        
      </a>
    
  </div>
</div>
<div class="item">
  <div class=" header">Modules</div>
  <div class="menu">
    
      <a class="item" href="/modules/accordion.html">
        Accordion
        
      </a>
  
      <a class="item" href="/modules/checkbox.html">
        Checkbox
        
      </a>
  
      <a class="item" href="/modules/dimmer.html">
        Dimmer
        
      </a>
  
      <a class="item" href="/modules/dropdown.html">
        Dropdown
        
      </a>
  
      <a class="item" href="/modules/embed.html">
        Embed
        
      </a>
  
      <a class="item" href="/modules/modal.html">
        Modal
        
      </a>
  
      <a class="item" href="/modules/popup.html">
        Popup
        
      </a>
  
      <a class="item" href="/modules/progress.html">
        Progress
        
      </a>
  
      <a class="item" href="/modules/rating.html">
        Rating
        
      </a>
  
      <a class="item" href="/modules/search.html">
        Search
        
      </a>
  
      <a class="item" href="/modules/shape.html">
        Shape
        
      </a>
  
      <a class="item" href="/modules/sidebar.html">
        Sidebar
        
      </a>
  
      <a class="item" href="/modules/sticky.html">
        Sticky
        
      </a>
  
      <a class="item" href="/modules/tab.html">
        Tab
        
      </a>
  
      <a class="item" href="/modules/transition.html">
        Transition
        
      </a>
  
  </div>
</div>
<div class="item">
  <div class=" header">Behaviors</div>
  <div class="menu">
    
      <a class="item" href="/behaviors/api.html">
        API
        
      </a>
    
      <a class="item" href="/behaviors/form.html">
        Form Validation
        
      </a>
    
      <a class="item" href="/behaviors/visibility.html">
        Visibility
        
      </a>
    
  </div>
</div>

        </div>
      </div>
      <div class="article">
        <link rel="stylesheet/less" type="text/css" href="/src/definitions/collections/menu.less" />
<script src="/javascript/menu.js"></script>



<div class="ui masthead vertical segment">
  <div class="ui container">
    <div class="introduction">

      <h1 class="ui header">
        Menu
        
        <div class="sub header">
          
          <a class="twitter-share-button twitter"
            href="http://twitter.com/share"
            data-text="Semantic UI is a next generation UI framework"
            data-url="http://semantic-ui.com"
            data-via="semanticui">
          </a>
          <script type="text/javascript">
          window.twttr=(function(d,s,id){var t,js,fjs=d.getElementsByTagName(s)[0];if(d.getElementById(id)){return}js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);return window.twttr||(t={_e:[],ready:function(f){t._e.push(f)}})}(document,"script","twitter-wjs"));
          </script>
          <iframe class="github" src="//ghbtns.com/github-btn.html?user=semantic-org&amp;repo=semantic-ui&amp;type=watch&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100" height="20"></iframe>
          
          A menu displays grouped navigation actions
        </div>
      </h1>

      <div class="ui hidden divider"></div>

      <div class="ui right floated main menu">
        <a class="bug popup icon item" data-content="Edit This Page" href="https://github.com/Semantic-Org/Semantic-UI-Docs/edit/master/server/documents/collections/menu.html.eco">
          <i class="edit icon"></i>
        </a>
        
        <a class="bug popup icon item" data-content="Submit Bug Report" href="https://github.com/Semantic-Org/Semantic-UI/issues/new?title=[Menu] - Your Bug Name&body=**Steps to Reproduce**%0A1. Do something%0A2. Do something else.%0A3. Do one last thing.%0A%0A**Expected**%0AThe Menu should do this%0A%0A**Result**%0AThe Menu does not do this%0A%0A**Testcase**%0A(fork this to get started)%0Ahttp://jsfiddle.net/rduvhn8u/1/">
          <i class="bug icon"></i>
        </a>
        
        <a class="github popup icon item" data-content="View project on GitHub" href="https://github.com/Semantic-Org/Semantic-UI">
          <i class="alternate github icon"></i>
        </a>
      </div>
      <div class="ui right floated main menu">
        <a class="music popup icon item" data-content="Play Music">
          <i class="music icon"></i>
        </a>
        <div class="ui language dropdown right floating icon item" id="languages" data-content="Select Language">
          <i class="world icon"></i>
          <div class="menu">
            <div class="header">Select Language</div>
            <div class="ui icon search input">
              <i class="search icon"></i>
              <input type="text" placeholder="Search languages...">
            </div>
            <div class="scrolling menu">
  <div class="item" data-percent="100" data-value="en" data-english="English">
    <span class="description">English</span>
    English
  </div>
  <div class="item" data-percent="94" data-value="da" data-english="Danish">
    <span class="description">dansk</span>
    Danish
  </div>
  <div class="item" data-percent="94" data-value="es" data-english="Spanish">
    <span class="description">Español</span>
    Spanish
  </div>
  <div class="item" data-percent="34" data-value="zh" data-english="Chinese">
    <span class="description">简体中文</span>
    Chinese
  </div>
  <div class="item" data-percent="54" data-value="zh_TW" data-english="Chinese (Taiwan)">
    <span class="description">中文 (臺灣)</span>
    Chinese (Taiwan)
  </div>
  <div class="item" data-percent="79" data-value="fa" data-english="Persian">
    <span class="description">پارسی</span>
    Persian
  </div>
  <div class="item" data-percent="41" data-value="fr" data-english="French">
    <span class="description">Français</span>
    French
  </div>
  <div class="item" data-percent="37" data-value="el" data-english="Greek">
    <span class="description">ελληνικά</span>
    Greek
  </div>
  <div class="item" data-percent="37" data-value="ru" data-english="Russian">
    <span class="description">Русский</span>
    Russian
  </div>
  <div class="item" data-percent="36" data-value="de" data-english="German">
    <span class="description">Deutsch</span>
    German
  </div>
  <div class="item" data-percent="23" data-value="it" data-english="Italian">
    <span class="description">Italiano</span>
    Italian
  </div>
  <div class="item" data-percent="21" data-value="nl" data-english="Dutch">
    <span class="description">Nederlands</span>
    Dutch
  </div>
  <div class="item" data-percent="19" data-value="pt_BR" data-english="Portuguese">
    <span class="description">Português(BR)</span>
    Portuguese
  </div>
  <div class="item" data-percent="17" data-value="id" data-english="Indonesian">
    <span class="description">Indonesian</span>
    Indonesian
  </div>
  <div class="item" data-percent="12" data-value="lt" data-english="Lithuanian">
    <span class="description">Lietuvių</span>
    Lithuanian
  </div>
  <div class="item" data-percent="11" data-value="tr" data-english="Turkish">
    <span class="description">Türkçe</span>
    Turkish
  </div>
  <div class="item" data-percent="10" data-value="kr" data-english="Korean">
    <span class="description">한국어</span>
    Korean
  </div>
  <div class="item" data-percent="7"  data-value="ar" data-english="Arabic">
    <span class="description">العربية</span>
    Arabic
  </div>
  <div class="item" data-percent="6"  data-value="hu" data-english="Hungarian">
    <span class="description">Magyar</span>
    Hungarian
  </div>
  <div class="item" data-percent="6"  data-value="vi" data-english="Vietnamese">
    <span class="description">tiếng Việt</span>
    Vietnamese
  </div>
  <div class="item" data-percent="5"  data-value="sv" data-english="Swedish">
    <span class="description">svenska</span>
    Swedish
  </div>
  <div class="item" data-precent="4"  data-value="pl" data-english="Polish">
    <span class="description">polski</span>
    Polish
  </div>
  <div class="item" data-percent="6"  data-value="ja" data-english="Japanese">
    <span class="description">日本語</span>
    Japanese
  </div>
  <div class="item" data-percent="0"  data-value="ro" data-english="Romanian">
    <span class="description">românește</span>
    Romanian
  </div>
</div>

          </div>
        </div>
      </div>

      
      
      <div class="ui floating dropdown theme basic button" data-element="menu" data-type="collection">
        <span class="text">4 Themes</span>
        <div class="menu transition hidden">
          
            <div class="item" data-value="Default" data-text="Default Theme">Default</div>
          
            <div class="item" data-value="Chubby" data-text="Chubby Theme">Chubby</div>
          
            <div class="item" data-value="GitHub" data-text="GitHub Theme">GitHub</div>
          
            <div class="item" data-value="Material" data-text="Material Theme">Material</div>
          
        </div>
      </div>
      
      
      <div class="ui download primary button">
        Download
      </div>
      <div class="ui flowing download basic popup">
        <div class="ui divided equal width relaxed center aligned choice grid">
          <div class="framework column">
            <h4 class="ui center aligned header">UI Framework</h4>
            <div class="ui list">
              <div class="item"><i class="green check icon"></i> Themable</div>
              <div class="item"><i class="green check icon"></i> Build Tools</div>
            </div>
            <div class="ui primary fluid button">Choose</div>
          </div>
          <div class="standalone column">
            <h4 class="ui center aligned header">Standalone</h4>
            <div class="ui list">
              <div class="item">Default Theme</div>
              <div class="item">Precompiled</div>
            </div>
            <div class="ui fluid button basic">Choose</div>
          </div>
        </div>
        <div class="ui divided equal height relaxed center aligned framework grid">
          <div class="column">
            <div class="ui header">Semantic UI</div>
            <a class="ui primary button" href="https://github.com/Semantic-Org/Semantic-UI/archive/master.zip">
              Download ZIP
            </a>
            <a class="ui button" href="/introduction/getting-started.html">Getting Started</a>
            <h4 class="ui header">Package Managers</h4>
            <div class="ui form">
              <div class="field">
                <label>NPM</label>
                <div class="ui fluid input">
                  <input type="text" readonly="readonly" placeholder="Copy Link" value="npm install semantic-ui">
                </div>
              </div>
              <div class="field">
                <label>Git</label>
                <div class="ui fluid input">
                  <input type="text" readonly="readonly" placeholder="Copy Link" value="https://github.com/Semantic-Org/Semantic-UI.git">
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="ui divided equal height relaxed center aligned standalone grid">
          <div class="column">
            <div class="ui header">Standalone Menu</div>
            <a class="ui primary button" href="https://github.com/Semantic-Org/UI-Menu/archive/master.zip">
              Download ZIP
            </a>
            <a class="ui button" href="https://github.com/Semantic-Org/UI-Menu/">
              View GitHub
            </a>
            <h4 class="ui header">Package Managers</h4>
            <div class="ui form">
              <div class="field">
                <label>Bower</label>
                <div class="ui fluid input">
                  <input type="text" readonly="readonly" placeholder="Copy Link" value="bower install semantic-ui-menu">
                </div>
              </div>
              <div class="field">
                <label>NPM</label>
                <div class="ui fluid input">
                  <input type="text" readonly="readonly" placeholder="Copy Link" value="npm install semantic-ui-menu">
                </div>
              </div>
              <div class="field">
                <label>Git</label>
                <div class="ui fluid input">
                  <input type="text" readonly="readonly" placeholder="Copy Link" value="https://github.com/Semantic-Org/UI-Menu.git">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
    </div>
    <div class="advertisement">
      
      <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=semanticuicom" id="_carbonads_js"></script>
      
    </div>
    
  </div>
</div>

  <script src="//m.servedby-buysellads.com/monetization.js" type="text/javascript"></script>
  <div class="bsa-cpc"></div>
  <script>
    (function(){
      if(typeof _bsa !== 'undefined' && _bsa) {
      _bsa.init('default', 'CVAIKK7I', 'placement:semanticuicom', {
        target: '.bsa-cpc',
        align: 'horizontal',
        disable_css: 'true'
      });
        }
    })();
  </script>
  <div class="ui vertical beg transition hidden segment">
    <i class="large red delete link icon"></i>
    <div class="ui red header">
      <i class="disabled warning sign icon"></i>
      <div class="content">
        Want to Support Open Source? Whitelist Your Ad-Blocker.
        <div class="sub header">
          We promise to not show more than one small ad per page. Dont worry, hiding this message will make sure you won't get nagged again.
        </div>
      </div>
    </div>
  </div>



<div class="main ui container">

  <h2 class="ui dividing header">Types</h2>
  <div class="example">
    <h4 class="ui header">
      Menu
    </h4>
    <p>A menu</p>
    <div class="ui ignored message">
      <p>Starting in <code>2.0</code> menus now use flexbox. This allows each menu item to automatically stretch to the size of the largest item.
    </div>
    <div class="ui three item menu">
      <a class="active item">Editorials</a>
      <a class="item">Reviews</a>
      <a class="item">Upcoming Events</a>
    </div>
  </div>
  <div class="another school example">
    <div class="ui ignored info message">
      Many of the following examples use a coupling with <a href="/modules/dropdown.html">dropdowns</a> to display dropdown menus inside of <code>ui menu</code>. Please consult the dropdown documentation for the correct javascript initialization for this component.
    </div>
    <div class="ui text menu">
      <div class="item">
        <img src="/images/new-school.jpg">
      </div>
      <a class="browse item">
        Browse Courses
        <i class="dropdown icon"></i>
      </a>
      <div class="ui right dropdown item">
        More
        <i class="dropdown icon"></i>
        <div class="menu">
          <div class="item">Applications</div>
          <div class="item">International Students</div>
          <div class="item">Scholarships</div>
        </div>
      </div>
    </div>
    <div class="ui flowing basic admission popup">
      <div class="ui three column relaxed divided grid">
        <div class="column">
          <h4 class="ui header">Business</h4>
          <div class="ui link list">
            <a class="item">Design & Urban Ecologies</a>
            <a class="item">Fashion Design</a>
            <a class="item">Fine Art</a>
            <a class="item">Strategic Design</a>
          </div>
        </div>
        <div class="column">
          <h4 class="ui header">Liberal Arts</h4>
          <div class="ui link list">
            <a class="item">Anthropology</a>
            <a class="item">Economics</a>
            <a class="item">Media Studies</a>
            <a class="item">Philosophy</a>
          </div>
        </div>
        <div class="column">
          <h4 class="ui header">Social Sciences</h4>
          <div class="ui link list">
            <a class="item">Food Studies</a>
            <a class="item">Journalism</a>
            <a class="item">Non Profit Management</a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="another example">
    <div class="ui top attached menu">
      <div class="ui dropdown icon item">
        <i class="wrench icon"></i>
        <div class="menu">
          <div class="item">
            <i class="dropdown icon"></i>
            <span class="text">New</span>
            <div class="menu">
              <div class="item">Document</div>
              <div class="item">Image</div>
            </div>
          </div>
          <div class="item">
            Open...
          </div>
          <div class="item">
            Save...
          </div>
          <div class="item">Edit Permissions</div>
          <div class="divider"></div>
          <div class="header">
            Export
          </div>
          <div class="item">
            Share...
          </div>
        </div>
      </div>
      <div class="right menu">
        <div class="ui right aligned category search item">
          <div class="ui transparent icon input">
            <input class="prompt" type="text" placeholder="Search animals...">
            <i class="search link icon"></i>
          </div>
          <div class="results"></div>
        </div>
      </div>
    </div>
    <div class="ui bottom attached segment">
      <img class="ui wireframe image" src="/images/wireframe/paragraph.png">
    </div>
  </div>

  <div class="example">
    <h4 class="ui header">Secondary Menu</h4>
    <p>A menu can adjust its appearance to de-emphasize its contents</p>
    <div class="ui secondary  menu">
      <a class="active item">
        Home
      </a>
      <a class="item">
        Messages
      </a>
      <a class="item">
        Friends
      </a>
      <div class="right menu">
        <div class="item">
          <div class="ui icon input">
            <input type="text" placeholder="Search...">
            <i class="search link icon"></i>
          </div>
        </div>
        <a class="ui item">
          Logout
        </a>
      </div>
    </div>
  </div>

  <div class="example">
    <h4 class="ui header">Pointing</h4>
    <p>A menu can point to show its relationship to nearby content</p>
    <div class="ui pointing menu">
      <a class="active item">
        Home
      </a>
      <a class="item">
        Messages
      </a>
      <a class="item">
        Friends
      </a>
      <div class="right menu">
        <div class="item">
          <div class="ui transparent icon input">
            <input type="text" placeholder="Search...">
            <i class="search link icon"></i>
          </div>
        </div>
      </div>
    </div>
    <div class="ui segment">
      <img class="ui wireframe image" src="/images/wireframe/paragraph.png">
    </div>
  </div>
  <div class="another example">
    <div class="ui secondary pointing menu">
      <a class="active item">
        Home
      </a>
      <a class="item">
        Messages
      </a>
      <a class="item">
        Friends
      </a>
      <div class="right menu">
        <a class="ui item">
          Logout
        </a>
      </div>
    </div>
    <div class="ui segment">
      <img class="ui wireframe image" src="/images/wireframe/media-paragraph.png">
    </div>
  </div>

  <div class="example">
    <h4 class="ui header">Tabular</h4>
    <p>A menu can be formatted to show tabs of information</p>
    <div class="ui ignored info message">
      Be sure to visit the <a href="/modules/tab.html">tab documentation</a> for information on how to set up dynamic tabs
    </div>
    <div class="ui tabular menu">
      <a class="active item">
        Bio
      </a>
      <a class="item">
        Photos
      </a>
    </div>
  </div>
  <div class="another example">
    <div class="ui top attached tabular menu">
      <a class="active item">
        Bio
      </a>
      <a class="item">
        Photos
      </a>
      <div class="right menu">
        <div class="item">
          <div class="ui transparent icon input">
            <input type="text" placeholder="Search users...">
            <i class="search link icon"></i>
          </div>
        </div>
      </div>
    </div>
    <div class="ui bottom attached segment">
      <img class="ui wireframe image" src="/images/wireframe/paragraph.png">
    </div>
  </div>
  <div class="another example">
    <div class="ui top attached segment">
      <img class="ui wireframe image" src="/images/wireframe/paragraph.png">
    </div>
    <div class="ui bottom attached tabular menu">
      <a class="active item">
        Active Project
      </a>
      <a class="item">
        Project #2
      </a>
      <a class="item">
        Project #3
      </a>
      <div class="right menu">
        <a class="item">
          <i class="add icon"></i> New Tab
        </a>
      </div>
    </div>
  </div>
  <div class="another example">
    <div class="ui grid">
      <div class="four wide column">
        <div class="ui vertical fluid tabular menu">
          <a class="active item">
            Bio
          </a>
          <a class="item">
            Pics
          </a>
          <a class="item">
            Companies
          </a>
          <a class="item">
            Links
          </a>
        </div>
      </div>
      <div class="twelve wide stretched column">
        <div class="ui segment">
          This is an stretched grid column. This segment will always match the tab height
        </div>
      </div>
    </div>
  </div>
  <div class="another example">
    <div class="ui grid">
      <div class="twelve wide stretched column">
        <div class="ui segment">
          This is an stretched grid column. This segment will always match the tab height
        </div>
      </div>
      <div class="four wide column">
        <div class="ui vertical fluid right tabular menu">
          <a class="active item">
            Bio
          </a>
          <a class="item">
            Pics
          </a>
          <a class="item">
            Companies
          </a>
          <a class="item">
            Links
          </a>
        </div>
      </div>
    </div>
  </div>


  <div class="example">
    <h4 class="ui header">Text</h4>
    <p>A menu can be formatted for text content</p>
    <div class="ui text menu">
      <div class="header item">Sort By</div>
      <a class="active item">
        Closest
      </a>
      <a class="item">
        Most Comments
      </a>
      <a class="item">
        Most Popular
      </a>
    </div>
  </div>

  <div class="example">
    <h4 class="ui header">Vertical Menu</h4>
    <p>A vertical menu displays elements vertically..</p>
    <div class="ui ignore warning message">A vertical menu's width defaults to an arbitrary size. To have it fit your content more precisely use the fluid variation in conjunction with <a href="grid.html">ui grid</a>.</div>

    <div class="ui vertical menu">
      <a class="active teal item">
        Inbox
        <div class="ui teal left pointing label">1</div>
      </a>
      <a class="item">
        Spam
        <div class="ui label">51</div>
      </a>
      <a class="item">
        Updates
        <div class="ui label">1</div>
      </a>
      <div class="item">
        <div class="ui transparent icon input">
          <input type="text" placeholder="Search mail...">
          <i class="search icon"></i>
        </div>
      </div>
    </div>
  </div>

  <div class="another example">
    <div class="ui secondary vertical menu">
      <a class="active item">
        Account
      </a>
      <a class="item">
        Settings
      </a>
      <div class="ui dropdown item">
        <i class="dropdown icon"></i>
        Display Options
        <div class="menu">
          <div class="header">Text Size</div>
          <a class="item">Small</a>
          <a class="item">Medium</a>
          <a class="item">Large</a>
        </div>
      </div>
    </div>
  </div>

  <div class="another example">
    <div class="ui vertical text menu">
      <div class="header item">Sort By</div>
      <a class="active item">
        Closest
      </a>
      <a class="item">
        Most Comments
      </a>
      <a class="item">
        Most Popular
      </a>
    </div>
  </div>

  <div class="another example">
    <div class="ui vertical pointing menu">
      <a class="active item">
        Home
      </a>
      <a class="item">
        Messages
      </a>
      <a class="item">
        Friends
      </a>
    </div>
  </div>

  <div class="another example">
    <div class="ui secondary vertical pointing menu">
      <a class="active item">
        Home
      </a>
      <a class="item">
        Messages
      </a>
      <a class="item">
        Friends
      </a>
    </div>
  </div>

  <div class="example">
    <h4 class="ui header">Pagination</h4>
    <p>A pagination menu is specially formatted to present links to pages of content</p>
    <div class="ui pagination menu">
      <a class="active item">
        1
      </a>
      <div class="disabled item">
        ...
      </div>
      <a class="item">
        10
      </a>
      <a class="item">
        11
      </a>
      <a class="item">
        12
      </a>
    </div>
  </div>

  <h2 class="ui dividing header">Content</h2>

  <div class="example">
    <h4 class="ui header">Header</h4>
    <p>A menu item may include a header or may itself be a header</p>
    <div class="ui menu">
      <div class="header item">
        Our Company
      </div>
      <a class="item">
        About Us
      </a>
      <a class="item">
        Jobs
      </a>
      <a class="item">
        Locations
      </a>
    </div>
  </div>
  <div class="another example">
    <div class="ui vertical menu">
      <div class="item">
        <div class="header">Products</div>
        <div class="menu">
          <a class="item">Enterprise</a>
          <a class="item">Consumer</a>
        </div>
      </div>
      <div class="item">
        <div class="header">CMS Solutions</div>
        <div class="menu">
          <a class="item">Rails</a>
          <a class="item">Python</a>
          <a class="item">PHP</a>
        </div>
      </div>
      <div class="item">
        <div class="header">Hosting</div>
        <div class="menu">
          <a class="item">Shared</a>
          <a class="item">Dedicated</a>
        </div>
      </div>
      <div class="item">
        <div class="header">Support</div>
        <div class="menu">
          <a class="item">E-mail Support</a>
          <a class="item">FAQs</a>
        </div>
      </div>
    </div>
  </div>

  <div class="example">
    <h4 class="ui header">Text</h4>
    <p>A vertical menu item can include any type of text content.</p>
    <div class="ui vertical menu">
      <a class="item">
        <h4 class="ui header">Promotions</h4>
        <p>Check out our new promotions</p>
      </a>
      <a class="item">
        <h4 class="ui header">Coupons</h4>
        <p>Check out our collection of coupons</p>
      </a>
      <a class="item">
        <h4 class="ui header">Rebates</h4>
        <p>Visit our rebate forum for information on claiming rebates</p>
      </a>
    </div>
  </div>

  <div class="example">
    <h4 class="ui header">Input</h4>
    <p>A menu item can contain an <a href="/elements/input.html">input</a> inside of it</p>
    <div class="ui menu">
      <div class="item">
        <div class="ui icon input">
          <input type="text" placeholder="Search...">
          <i class="search icon"></i>
        </div>
      </div>
      <div class="right item">
        <div class="ui action input">
          <input type="text" placeholder="Navigate to...">
          <div class="ui button">Go</div>
        </div>
      </div>
    </div>
  </div>


  <div class="example">
    <h4 class="ui header">Button</h4>
    <p>A menu item can contain a <a href="/elements/button.html">button</a> inside of it</p>

    <div class="ui menu">
      <div class="item">
        <div class="ui primary button">Sign up</div>
      </div>
      <div class="item">
        <div class="ui button">Log-in</div>
      </div>
    </div>
  </div>


  <div class="example">
    <h4 class="ui header">Link Item</h4>
    <p>A menu may contain a link item, or an item formatted as if it is a link.</p>
    <div class="ui vertical menu">
      <a href="http://www.google.com" class="item">
        Visit Google
      </a>
      <div class="link item">
        Javascript Link
      </div>
    </div>
  </div>

  <div class="example">
    <h4 class="ui header">Dropdown Item</h4>
    <p>An item may contain a nested menu in a <a href="/modules/dropdown.html">dropdown</a>.</p>
    <div class="ui ignored message">
      <p>To have a dropdown open without Javascript, use the <a href="/modules/dropdown.html#simple">simple</a> variation</p>
    </div>
    <div class="ui vertical menu">
      <div class="ui dropdown item">
        Categories
        <i class="dropdown icon"></i>
        <div class="menu">
          <a class="item">Electronics</a>
          <a class="item">Automotive</a>
          <a class="item">Home</a>
        </div>
      </div>
    </div>
  </div>

  <div class="popup example">
    <h4 class="ui header">Popup Menu</h4>
    <p>A menu item may show a large menu, or additional content using a <a href="/modules/popup.html">popup</a></p>
    <div class="ui menu">
      <a class="browse item">
        Browse
        <i class="dropdown icon"></i>
      </a>
    </div>
    <div class="ui fluid popup">
      <div class="ui four column relaxed equal height divided grid">
        <div class="column">
          <h4 class="ui header">Fabrics</h4>
          <div class="ui link list">
            <a class="item">Cashmere</a>
            <a class="item">Linen</a>
            <a class="item">Cotton</a>
            <a class="item">Viscose</a>
          </div>
        </div>
        <div class="column">
          <h4 class="ui header">Size</h4>
          <div class="ui link list">
            <a class="item">Small</a>
            <a class="item">Medium</a>
            <a class="item">Large</a>
            <a class="item">Plus Sizes</a>
          </div>
        </div>
        <div class="column">
          <h4 class="ui header">Colored</h4>
          <div class="ui link list">
            <a class="item">Neutrals</a>
            <a class="item">Brights</a>
            <a class="item">Pastels</a>
          </div>
        </div>
        <div class="column">
          <h4 class="ui header">Types</h4>
          <div class="ui link list">
            <a class="item">Knitwear</a>
            <a class="item">Outerwear</a>
            <a class="item">Pants</a>
            <a class="item">Shoes</a>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="example">
    <h4 class="ui header">Search</h4>
    <p>A menu can contain a <a href="/modules/search.html">search</a> input</p>
    <div class="ui menu">
      <div class="ui category search item">
        <div class="ui transparent icon input">
          <input class="prompt" type="text" placeholder="Search animals...">
          <i class="search link icon"></i>
        </div>
        <div class="results"></div>
      </div>
    </div>
    <div class="ui segment">
      <img class="ui wireframe image" src="/images/wireframe/paragraph.png">
    </div>
  </div>

  <div class="example">
    <h4 class="ui header">Menu</h4>
    <p>A menu may contain another menu group in the same level as menu items.</p>
    <div class="ui menu">
      <a class="item">Browse</a>
      <a class="item">Submit</a>
      <div class="right menu">
        <a class="item">Sign Up</a>
        <a class="item">Help</a>
      </div>
    </div>
  </div>


  <div class="example">
    <h4 class="ui header">Sub Menu</h4>
    <p>A menu item may contain another menu nested inside that acts as a grouped sub-menu.</p>
    <div class="ui vertical menu">
      <div class="item">
        <div class="ui input"><input type="text" placeholder="Search..."></div>
      </div>
      <div class="item">
        Home
        <div class="menu">
          <a class="active item">Search</a>
          <a class="item">Add</a>
          <a class="item">Remove</a>
        </div>
      </div>
      <a class="item">
        <i class="grid layout icon"></i> Browse
      </a>
      <a class="item">
        Messages
      </a>
      <div class="ui dropdown item">
        More
        <i class="dropdown icon"></i>
        <div class="menu">
          <a class="item"><i class="edit icon"></i> Edit Profile</a>
          <a class="item"><i class="globe icon"></i> Choose Language</a>
          <a class="item"><i class="settings icon"></i> Account Settings</a>
        </div>
      </div>
    </div>
  </div>

  <h2 class="ui dividing header">States</h2>

  <div class="example">
    <h4 class="ui header">Hover</h4>
    <p>A menu item can be hovered</p>
    <div class="ui ignore warning message">Menu items are only hoverable if they are <code>a</code> links, or given the class name <code>link</code></div>
    <div class="ui compact menu">
      <a class="item">
        A link
      </a>
      <div class="link item">
        div Link
      </div>
    </div>
  </div>


  <div class="example">
    <h4 class="ui header">Active</h4>
    <p>A menu item can be active</p>
    <div class="ui compact menu">
      <div class="active item">
        Link
      </div>
    </div>
  </div>


  <h2 class="ui dividing header">Variations</h2>

  <div class="fixed example">
    <h4 class="ui header">Fixed</h4>
    <p>A menu can be fixed to a side of its context</p>
    <div class="ui ignored info message">These examples use a an <code>iframe</code>, to prevent content from sticking to the browser viewport.</div>
    <div class="ui ignored positive message">For more advanced behaviors consider using a <a href="/modules/sticky.html">sticky menu</a> or <a href="/behaviors/visibility.html#fixing-content-to-viewport">visibility APIs</a>.</div>
    <iframe src="/iframe/fixed-menu.html"></iframe>
    <div class="existing code">
      <div class="ui top fixed menu">
        <div class="item">
          <img src="/images/logo.png">
        </div>
        <a class="item">Features</a>
        <a class="item">Testimonials</a>
        <a class="item">Sign-in</a>
      </div>
      <div class="ui bottom fixed menu">
        <div class="item">
          <img src="/images/logo.png">
        </div>
        <a class="item">Features</a>
        <a class="item">Testimonials</a>
        <a class="item">Sign-in</a>
      </div>
      <p></p>
      <p></p>
    </div>
  </div>
  <div class="another fixed example">
    <iframe src="/iframe/fixed-vertical-menu.html"></iframe>
    <div class="existing code">
      <div class="ui left fixed vertical menu">
        <div class="item">
          <img class="ui mini image" src="/images/logo.png">
        </div>
        <a class="item">Features</a>
        <a class="item">Testimonials</a>
        <a class="item">Sign-in</a>
      </div>
      <div class="ui right fixed vertical menu">
        <div class="item">
          <img class="ui mini image" src="/images/logo.png">
        </div>
        <a class="item">Features</a>
        <a class="item">Testimonials</a>
        <a class="item">Sign-in</a>
      </div>
      <p></p>
      <p></p>
    </div>
  </div>

  <div class="example">
    <h4 class="ui header">Stackable</h4>
    <p>A menu can stack at mobile resolutions</p>
    <div class="ui ignored info message">
      Stackable menus are intended to be used with only simple menu content. Stacked menus will not replicate all additional stylings for vertical menus like adjusting dropdown position.
    </div>
    <div class="ui stackable menu">
      <div class="item">
        <img src="/images/logo.png">
      </div>
      <a class="item">Features</a>
      <a class="item">Testimonials</a>
      <a class="item">Sign-in</a>
    </div>
  </div>

  <div class="example">
    <h4 class="ui header">Inverted</h4>
    <p>A menu may have its colors inverted to show greater contrast</p>
    <div class="ui inverted menu">
      <a class="active item">
        Home
      </a>
      <a class="item">
        Messages
      </a>
      <a class="item">
        Friends
      </a>
    </div>
  </div>
  <div class="another example">
    <div class="ui inverted vertical menu">
      <a class="active item">
        Home
      </a>
      <a class="item">
        Messages
      </a>
      <a class="item">
        Friends
      </a>
    </div>
  </div>
  <div class="another example">
    <div class="ui inverted vertical pointing menu">
      <a class="active item">
        Home
      </a>
      <a class="item">
        Messages
      </a>
      <a class="item">
        Friends
      </a>
    </div>
  </div>
  <div class="another example">
    <div class="ui inverted segment">
      <div class="ui inverted secondary menu">
        <a class="active item">
          Home
        </a>
        <a class="item">
          Messages
        </a>
        <a class="item">
          Friends
        </a>
      </div>
    </div>
  </div>
  <div class="another example">
    <div class="ui inverted segment">
      <div class="ui inverted secondary pointing menu">
        <a class="active item">
          Home
        </a>
        <a class="item">
          Messages
        </a>
        <a class="item">
          Friends
        </a>
      </div>
    </div>
  </div>
  <div class="example">
    <h4 class="ui header">Colored</h4>
    <p>Additional colors can be specified.</p>
    <div class="ui menu">
      <a class="active red item">Red</a>
      <a class="orange item">Orange</a>
      <a class="yellow item">Yellow</a>
      <a class="olive item">Olive</a>
      <a class="green item">Green</a>
      <a class="teal item">Teal</a>
    </div>
    <div class="ui menu">
      <a class="blue item">Blue</a>
      <a class="violet item">Violet</a>
      <a class="purple item">Purple</a>
      <a class="pink item">Pink</a>
      <a class="brown item">Brown</a>
      <a class="grey item">Grey</a>
    </div>
  </div>
  <div class="another example">
    <div class="ui red three item menu">
      <a class="active item">
        Home
      </a>
      <a class="item">
        Messages
      </a>
      <a class="item">
        Friends
      </a>
    </div>
    <div class="ui orange three item menu">
      <a class="active item">
        Home
      </a>
      <a class="item">
        Messages
      </a>
      <a class="item">
        Friends
      </a>
    </div>
    <div class="ui yellow three item menu">
      <a class="active item">
        Home
      </a>
      <a class="item">
        Messages
      </a>
      <a class="item">
        Friends
      </a>
    </div>
    <div class="ui olive three item menu">
      <a class="active item">
        Home
      </a>
      <a class="item">
        Messages
      </a>
      <a class="item">
        Friends
      </a>
    </div>
    <div class="ui green three item menu">
      <a class="active item">
        Home
      </a>
      <a class="item">
        Messages
      </a>
      <a class="item">
        Friends
      </a>
    </div>
    <div class="ui teal three item menu">
      <a class="active item">
        Home
      </a>
      <a class="item">
        Messages
      </a>
      <a class="item">
        Friends
      </a>
    </div>
    <div class="ui blue three item menu">
      <a class="active item">
        Home
      </a>
      <a class="item">
        Messages
      </a>
      <a class="item">
        Friends
      </a>
    </div>
    <div class="ui violet three item menu">
      <a class="active item">
        Home
      </a>
      <a class="item">
        Messages
      </a>
      <a class="item">
        Friends
      </a>
    </div>
    <div class="ui purple three item menu">
      <a class="active item">
        Home
      </a>
      <a class="item">
        Messages
      </a>
      <a class="item">
        Friends
      </a>
    </div>
    <div class="ui pink three item menu">
      <a class="active item">
        Home
      </a>
      <a class="item">
        Messages
      </a>
      <a class="item">
        Friends
      </a>
    </div>
    <div class="ui brown three item menu">
      <a class="active item">
        Home
      </a>
      <a class="item">
        Messages
      </a>
      <a class="item">
        Friends
      </a>
    </div>
    <div class="ui grey three item menu">
      <a class="active item">
        Home
      </a>
      <a class="item">
        Messages
      </a>
      <a class="item">
        Friends
      </a>
    </div>
  </div>
  <div class="another example">
    <p>These colors can also be inverted</p>
    <div class="ui inverted menu">
      <a class="active red item">Red</a>
      <a class="orange item">Orange</a>
      <a class="yellow item">Yellow</a>
      <a class="olive item">Olive</a>
      <a class="green item">Green</a>
      <a class="teal item">Teal</a>
    </div>
    <div class="ui inverted menu">
      <a class="blue item">Blue</a>
      <a class="violet item">Violet</a>
      <a class="purple item">Purple</a>
      <a class="pink item">Pink</a>
      <a class="brown item">Brown</a>
      <a class="grey item">Grey</a>
    </div>
  </div>
  <div class="another example">
    <div class="ui red three item inverted menu">
      <a class="active item">
        Home
      </a>
      <a class="item">
        Messages
      </a>
      <a class="item">
        Friends
      </a>
    </div>
    <div class="ui orange three item inverted menu">
      <a class="active item">
        Home
      </a>
      <a class="item">
        Messages
      </a>
      <a class="item">
        Friends
      </a>
    </div>
    <div class="ui yellow three item inverted menu">
      <a class="active item">
        Home
      </a>
      <a class="item">
        Messages
      </a>
      <a class="item">
        Friends
      </a>
    </div>
    <div class="ui olive three item inverted menu">
      <a class="active item">
        Home
      </a>
      <a class="item">
        Messages
      </a>
      <a class="item">
        Friends
      </a>
    </div>
    <div class="ui green three item inverted menu">
      <a class="active item">
        Home
      </a>
      <a class="item">
        Messages
      </a>
      <a class="item">
        Friends
      </a>
    </div>
    <div class="ui teal three item inverted menu">
      <a class="active item">
        Home
      </a>
      <a class="item">
        Messages
      </a>
      <a class="item">
        Friends
      </a>
    </div>
    <div class="ui blue three item inverted menu">
      <a class="active item">
        Home
      </a>
      <a class="item">
        Messages
      </a>
      <a class="item">
        Friends
      </a>
    </div>
    <div class="ui violet three item inverted menu">
      <a class="active item">
        Home
      </a>
      <a class="item">
        Messages
      </a>
      <a class="item">
        Friends
      </a>
    </div>
    <div class="ui purple three item inverted menu">
      <a class="active item">
        Home
      </a>
      <a class="item">
        Messages
      </a>
      <a class="item">
        Friends
      </a>
    </div>
    <div class="ui pink three item inverted menu">
      <a class="active item">
        Home
      </a>
      <a class="item">
        Messages
      </a>
      <a class="item">
        Friends
      </a>
    </div>
    <div class="ui brown three item inverted menu">
      <a class="active item">
        Home
      </a>
      <a class="item">
        Messages
      </a>
      <a class="item">
        Friends
      </a>
    </div>
    <div class="ui grey three item inverted menu">
      <a class="active item">
        Home
      </a>
      <a class="item">
        Messages
      </a>
      <a class="item">
        Friends
      </a>
    </div>
  </div>


  <div class="example">
    <h4 class="ui header">Icons</h4>
    <p>A menu may have just icons</p>
    <div class="ui icon menu">
      <a class="item">
        <i class="gamepad icon"></i>
      </a>
      <a class="item">
        <i class="video camera icon"></i>
      </a>
      <a class="item">
        <i class="video play icon"></i>
      </a>
    </div>
    <br><br>
    <div class="ui vertical icon menu">
      <a class="item">
        <i class="gamepad icon"></i>
      </a>
      <a class="item">
        <i class="video camera icon"></i>
      </a>
      <a class="item">
        <i class="video play icon"></i>
      </a>
    </div>
  </div>

  <div class="example">
    <h4 class="ui header">Labeled Icon</h4>
    <p>A menu may have labeled icons</p>
    <div class="ui labeled icon menu">
      <a class="item">
        <i class="gamepad icon"></i>
        Games
      </a>
      <a class="item">
        <i class="video camera icon"></i>
        Channels
      </a>
      <a class="item">
        <i class="video play icon"></i>
        Videos
      </a>
    </div>
    <br><br>
    <div class="ui vertical labeled icon menu">
      <a class="item">
        <i class="gamepad icon"></i>
        Games
      </a>
      <a class="item">
        <i class="video camera icon"></i>
        Channels
      </a>
      <a class="item">
        <i class="video play icon"></i>
        Videos
      </a>
    </div>
  </div>


  <div class="example">
    <h4 class="ui header">Fluid</h4>
    <p>A vertical menu may take the size of its container. (A horizontal menu does this by default) </p>
    <div class="ui fluid vertical menu">
      <a class="item">Run</a>
      <a class="item">Walk</a>
      <a class="item">Bike</a>
    </div>
  </div>

  <div class="example">
    <h4 class="ui header">Compact</h4>
    <p>A menu can take up only the space necessary to fit its content</p>
    <div class="ui compact menu">
      <a class="item">
        <i class="gamepad icon"></i>
        Games
      </a>
      <a class="item">
        <i class="video camera icon"></i>
        Channels
      </a>
      <a class="item">
        <i class="video play icon"></i>
        Videos
      </a>
    </div>
  </div>
  <div class="another example">
    <div class="ui compact vertical labeled icon menu">
      <a class="item">
        <i class="gamepad icon"></i>
        Games
      </a>
      <a class="item">
        <i class="video camera icon"></i>
        Channels
      </a>
      <a class="item">
        <i class="video play icon"></i>
        Videos
      </a>
    </div>
  </div>


  <div class="example">
    <h4 class="ui header">Evenly Divided</h4>
    <p>A menu may divide its items evenly</p>
    <div class="ui fluid three item menu">
      <a class="item">Buy</a>
      <a class="item">Sell</a>
      <a class="item">Rent</a>
    </div>
  </div>

  <div class="example">
    <p>A vertical menu can point to content adjacent to itself to show ownership</p>
    <div class="ui pointing vertical menu">
      <a class="item">
        Site Title
      </a>
      <div class="item">
        <b>Grouped Section</b>
        <div class="menu">
          <a class="item">Subsection 1</a>
          <a class="active item">Subsection 1</a>
          <a class="item">Subsection 1</a>
        </div>
      </div>
      <div class="ui dropdown item">
        Dropdown <i class="dropdown icon"></i>
        <div class="menu">
          <div class="item">Choice 1</div>
          <div class="item">Choice 2</div>
          <div class="item">Choice 3</div>
        </div>
      </div>
    </div>
  </div>


  <div class="example">
    <h4 class="ui header">Attached</h4>
    <p>A menu may be attached to other content segments</p>
    <div class="ui top attached tabular menu">
      <a class="active item">
        Tab 1
      </a>
      <a class="item">
        Tab 2
      </a>
    </div>
    <div class="ui bottom attached segment">
      There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.
    </div>
  </div>
  <div class="another example">
    <div class="ui top attached menu">
      <a class="active item">
        Section 1
      </a>
      <a class="item">
        Section 2
      </a>
    </div>
    <div class="ui attached segment">
      There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.
    </div>
    <div class="ui bottom attached menu">
      <a class="active item">
        Section 1
      </a>
      <a class="item">
        Section 2
      </a>
    </div>
  </div>

  <div class="example">
    <h4 class="ui header">Size</h4>
    <p>A menu can vary in size</p>
    <div class="ui mini menu">
      <a class="active item">
        Home
      </a>
      <a class="item">
        Messages
      </a>
      <div class="right menu">
        <div class="ui dropdown item">
          Language <i class="dropdown icon"></i>
          <div class="menu">
            <a class="item">English</a>
            <a class="item">Russian</a>
            <a class="item">Spanish</a>
          </div>
        </div>
        <div class="item">
            <div class="ui primary button">Sign Up</div>
        </div>
      </div>
    </div>
  </div>
  <div class="another example">
    <div class="ui tiny menu">
      <a class="active item">
        Home
      </a>
      <a class="item">
        Messages
      </a>
      <div class="right menu">
        <div class="ui dropdown item">
          Language <i class="dropdown icon"></i>
          <div class="menu">
            <a class="item">English</a>
            <a class="item">Russian</a>
            <a class="item">Spanish</a>
          </div>
        </div>
        <div class="item">
            <div class="ui primary button">Sign Up</div>
        </div>
      </div>
    </div>
  </div>
  <div class="another example">
    <div class="ui small menu">
      <a class="active item">
        Home
      </a>
      <a class="item">
        Messages
      </a>
      <div class="right menu">
        <div class="ui dropdown item">
          Language <i class="dropdown icon"></i>
          <div class="menu">
            <a class="item">English</a>
            <a class="item">Russian</a>
            <a class="item">Spanish</a>
          </div>
        </div>
        <div class="item">
            <div class="ui primary button">Sign Up</div>
        </div>
      </div>
    </div>
  </div>
  <div class="another example">
    <div class="ui large menu">
      <a class="active item">
        Home
      </a>
      <a class="item">
        Messages
      </a>
      <div class="right menu">
        <div class="ui dropdown item">
          Language <i class="dropdown icon"></i>
          <div class="menu">
            <a class="item">English</a>
            <a class="item">Russian</a>
            <a class="item">Spanish</a>
          </div>
        </div>
        <div class="item">
            <div class="ui primary button">Sign Up</div>
        </div>
      </div>
    </div>
  </div>
  <div class="another example">
    <div class="ui huge menu">
      <a class="active item">
        Home
      </a>
      <a class="item">
        Messages
      </a>
      <div class="right menu">
        <div class="ui dropdown item">
          Language <i class="dropdown icon"></i>
          <div class="menu">
            <a class="item">English</a>
            <a class="item">Russian</a>
            <a class="item">Spanish</a>
          </div>
        </div>
        <div class="item">
            <div class="ui primary button">Sign Up</div>
        </div>
      </div>
    </div>
  </div>
  <div class="another example">
    <div class="ui massive menu">
      <a class="active item">
        Home
      </a>
      <a class="item">
        Messages
      </a>
      <div class="right menu">
        <div class="ui dropdown item">
          Language <i class="dropdown icon"></i>
          <div class="menu">
            <a class="item">English</a>
            <a class="item">Russian</a>
            <a class="item">Spanish</a>
          </div>
        </div>
        <div class="item">
            <div class="ui primary button">Sign Up</div>
        </div>
      </div>
    </div>
  </div>
  <div class="example">
    <p>A vertical menu can also vary in size</p>
    <div class="ui mini vertical menu">
      <a class="active item">
        <div class="ui teal label">1</div>
        Inbox
      </a>
      <a class="item">
        <div class="ui label">51</div>
        Spam
      </a>
      <a class="item">
        <div class="ui label">1</div>
        Updates
      </a>
      <div class="item">
        <div class="ui icon input">
          <input type="text" placeholder="Search mail...">
          <i class="search icon"></i>
        </div>
      </div>
    </div>
  </div>
  <div class="another example">
    <div class="ui small vertical menu">
      <a class="active item">
        <div class="ui small teal label">1</div>
        Inbox
      </a>
      <a class="item">
        <div class="ui small label">51</div>
        Spam
      </a>
      <a class="item">
        <div class="ui small label">1</div>
        Updates
      </a>
      <div class="item">
        <div class="ui icon input">
          <input type="text" placeholder="Search mail...">
          <i class="search icon"></i>
        </div>
      </div>
    </div>
  </div>
  <div class="another example">
    <div class="ui large vertical menu">
      <a class="active item">
        <div class="ui small teal label">1</div>
        Inbox
      </a>
      <a class="item">
        <div class="ui small label">51</div>
        Spam
      </a>
      <a class="item">
        <div class="ui small label">1</div>
        Updates
      </a>
      <div class="item">
        <div class="ui icon input">
          <input type="text" placeholder="Search mail...">
          <i class="search icon"></i>
        </div>
      </div>
    </div>
  </div>
  <div class="another example">
    <div class="ui massive vertical menu">
      <a class="active item">
        <div class="ui small teal label">1</div>
        Inbox
      </a>
      <a class="item">
        <div class="ui small label">51</div>
        Spam
      </a>
      <a class="item">
        <div class="ui small label">1</div>
        Updates
      </a>
      <div class="item">
        <div class="ui icon input">
          <input type="text" placeholder="Search mail...">
          <i class="search icon"></i>
        </div>
      </div>
    </div>
  </div>

  <h3 class="ui header">Items</h3>

  <div class="example">
    <h4 class="ui header">Fitted</h4>
    <p>A menu item or menu can remove element padding, vertically or horizontally</p>
    <div class="ui menu">
      <div class="fitted item">
        No padding whatsoever
      </div>
      <div class="horizontally fitted item">
        No horizontal padding
      </div>
      <div class="vertically fitted item">
        No vertical padding
      </div>
    </div>
  </div>


  <div class="example">
    <h4 class="ui header">Borderless</h4>
    <p>A menu item or menu can have no borders</p>
    <div class="ui borderless menu">
      <a class="item">1</a>
      <a class="item">2</a>
      <a class="item">3</a>
      <a class="item">4</a>
      <a class="item">5</a>
      <a class="item">6</a>
    </div>
  </div>


</div>
        <div class="ui  vertical footer segment">
  <div class="ui center aligned container">
    <div class="ui stackable grid">
      <div class="three wide column">
        <h4 class="ui header">Community</h4>
        <div class="ui link list">
          <a class="item" href="https://www.transifex.com/organization/semantic-org/" target="_blank">Help Translate</a>
          <a class="item" href="https://github.com/Semantic-Org/Semantic-UI/issues" target="_blank">Submit an Issue</a>
          <a class="item" href="https://gitter.im/Semantic-Org/Semantic-UI" target="_blank">Join our Chat</a>
          <a class="item" href="/cla.html" target="_blank">CLA</a>
        </div>
      </div>
      <div class="three wide column">
        <h4 class="ui header">Network</h4>
        <div class="ui link list">
          <a class="item" href="https://github.com/Semantic-Org/Semantic-UI" target="_blank">GitHub Repo</a>
          <a class="item" href="http://forums.semantic-ui.com" target="_blank">User Forums</a>
          <a class="item" href="http://1.semantic-ui.com">1.x Docs</a>
          <a class="item" href="http://legacy.semantic-ui.com">0.x Docs</a>
        </div>
      </div>
      <div class="seven wide right floated column">
        <h4 class="ui header">Help Preserve This Project</h4>
        <p> Support for the continued development of Semantic UI comes directly from the community.</p>
        <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
          <input type="hidden" name="cmd" value="_s-xclick">
          <input type="hidden" name="hosted_button_id" value="7ZAF2Q8DBZAQL">
          <button type="submit" class="ui large teal button">Donate Today</button>
        </form>
      </div>
    </div>
    <div class="ui section divider"></div>
    <img src="/images/logo.png" class="ui centered mini image">
    <div class="ui horizontal small divided link list">
      <a class="item" href="http://semantic-ui.mit-license.org/" target="_blank">Free & Open Source (MIT)</a>
    </div>
  </div>
</div>

      </div>
    </div>
  </div>
  <div class="ui basic language modal">
  <i class="close icon"></i>
  <div class="header">The <span class="name"></span> Translation Needs Your Help</div>
  <div class="image content">
    <div class="middle aligned image">
      <i class="world icon"></i>
    </div>
    <div class="description">
      <p>This translation is only <b><span class="complete"></span>%</b> complete!</p>
      <div class="ui inverted indicating progress">
        <div class="bar"></div>
      </div>
      <p>We need your help to make Semantic available to  people who speak your language.</p>
      <p>Our translation tools are easy to use and allow you to translate text without having to leave the site.
      </p>
    </div>
  </div>
  <div class="actions">
    <div class="ui inverted cancel button">No Thanks</div>
    <a href="https://github.com/Semantic-Org/Semantic-UI/wiki/Translating-Semantic-UI-Docs" target="_blank" class="ui inverted approve teal button">
      <i class="mail icon"></i>
      Help Translate
    </a>
  </div>
</div>

<div class="ui basic chinese modal">
  <i class="close icon"></i>
  <div class="header">Would you like to visit the mirror site?</div>
  <div class="image content">
    <div class="middle aligned image">
      <i class="question icon"></i>
    </div>
    <div class="description">
      <p>Semantic is available at <a href="http://www.semantic-ui.cn">semantic-ui.cn</a> a mirror site hosted inside China. This should make browsing much faster for those visiting from mainland China.
      </p>
    </div>
  </div>
  <div class="actions">
    <div class="ui inverted red cancel button">No Thanks</div>
    <a href="http://www.semantic-ui.cn" class="ui inverted green approve button">
      <i class="mail icon"></i>
      Yes, take me to the mirror
    </a>
  </div>
</div>
  <div class="ui demo page dimmer">
  <div class="content">
    <div class="center">
      <h2 class="ui inverted icon header">
        <i class="mail icon"></i>
        Dimmer Message
        <div class="sub header">Dimmer sub-header</div>
      </h2>
    </div>
  </div>
</div>
  <script>
window.less = {
  async        : true,
  environment  : 'production',
  fileAsync    : false,
  onReady      : false,
  useFileCache : true
};
</script>

<script src="/javascript/library/less.min.js"></script>


</body>
</html>
